<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/main/dist/css/bootstrap.min.css" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>校园平台模块导航界面</title>
    <style>
      .plat-nav {
        position: fixed;
        height: 100%;
        width: 100%;
        background: #000;
        font-size: 18px;
        display: flex;
        flex-direction: column;
        padding: 40px;
      }

      .plat-nav-box ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        align-content: center;
        width: 1200px;
        height: 400px;
      }

      .plat-nav-box ul li {
        list-style: none;
        display: inline-block;
        width: 100px;
        height: 50px;
        line-height: 50px;
        background: #5cadff;
        margin: 20px 40px;
        text-align: center;
        border-radius: 4px;
        cursor: pointer;
      }

      .plat-nav-box ul li a {
        color: #fff;
      }
      button {
        width: 100px;
      }
    </style>
  </head>
  <body>
    <div class="plat-nav">
      <div class="plat-nav-box"><ul></ul></div>
      <!-- <button class="test">测试get</button>
    <button class="testAlarm">测试alarm转发</button> -->
    </div>
    <script src="/main/dist/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
      $(function() {
        initData();
      });
      // 加载初始化数据
      var modules = [];
      let initData = () => {
        $.ajax({
          type: "GET",
          dataType: "json",
          url: "/init/load_modules",
          success: res => {
            creatElement(res);
          },
          error: err => {
            console.log(err);
          }
        });
      };
      // 创建checkbox选项
      let creatElement = arr => {
        arr.map(item => {
          if (item.key !== "auth") {
            $(".plat-nav-box ul").append(
              `<li><a href="${item.key}">${item.name}</a></li>`
            );
          }
        });
      };
      // 保存并发送已选项
      $(".test").click(() => {
        $.ajax({
          type: "get",
          dataType: "json",
          // data: {
          //   modules: {key: 1}
          // },
          tradional: true,
          url: "/api/load",
          success: res => {
            console.log("发送成功");
          },
          error: err => {
            console.log(err);
          }
        });
      });
      $(".testAlarm").click(() => {
        $.ajax({
          type: "get",
          dataType: "json",
          // contentType: "application/json; charset=utf-8",
          // data: JSON.stringify(obj),
          url: "api/alarm/manage",
          success: res => {
            console.log("发送成功");
          },
          error: err => {
            console.log(err);
          }
        });
      });
    </script>
  </body>
</html>
